import React, { Component } from 'react';
import MarkDown from 'react-markdown';
import { Card } from 'antd'

const usage_style = {
    paddingLeft: 60,
    paddingTop: 10,
    paddingRight: 60,
    paddingBottom: 10
}

export default class UsageComponent extends Component {

    componentDidMount() {

    }

    shouldComponentUpdate(nextProps, nextState) {
        return !(this.props === nextProps || is(this.props, nextProps)) ||
            !(this.state === nextState || is(this.state, nextState));
    }

    render() {
        let usage_html;
        try{
            usage_html = require('../constants/usage_en.html');
        } catch (e) {
            usage_html = require('fs').readFileSync('react/constants/usage_en.html', 'utf8');
        }

        return (
            <Card style={usage_style}>
                <div dangerouslySetInnerHTML={{__html: usage_html}}></div>
            </Card>

        )

    }

}
